import { useEffect, useState } from "react";
import { Text, View, Image, Input } from "@tarojs/components";
// import Tabs from "../../components/Tabs.jsx";
import InfiniteLoading from "../../../components/InfiniteLoading.jsx";
import InfiniteLoadingFoot from "../../../components/InfiniteLoadingFoot.jsx";
import usePage from "./hooks/usePage.js";
import { iconSearch, iconClose } from "../../assets/files.js";

import Taro, { useUnload } from "@tarojs/taro";
import { baseUrl } from "../../../utils/request.js";
import { navigateTo } from "../../../common/_.js";
import { pageMiniVideo, selectVideoList, watchVideo } from "../../../api/video.js";

import { NavBar, Tabs } from "@nutui/nutui-react-taro";
import { ArrowLeft } from '@nutui/icons-react-taro'
import contextVideo from "../../../pages/home/components/videoList/videoContext.js"
import VideoList from "../../../pages/home/components/videoList/index.js";
import "./index.scss";

definePageConfig({
  navigationBarTitleText: "资讯列表",
  disableScroll: true,
});


// const TABS = [
//   { value: "2", title: "个人预约" },
//   { value: "1", title: "团队预约" },
// ];

export default function Record() {
  const [tabs, setTabs] = useState([])
  const [statusBarHeight, setStatusBarHeight] = useState(47)
  const [tabValue, setTabValue] = useState('0')


  const [params, setParams] = useState({ videoName: '', videoTypeId: "", pageSize: 5 });
  const { listData,setListData, refreshing, empty, loadMore, onPull, onLoad } = usePage({
    request: pageMiniVideo,
    params,
  });

  useEffect(() => {
    getVideoType()
  }, [])

  useEffect(() => {
    Taro.getSystemInfoAsync({
      success(res) {
        setStatusBarHeight(res.statusBarHeight)
      }
    })
  }, [])




  function getVideoType() {
    selectVideoList({}).then(res => {
      if (res.success) {
        // { value: "2", title: "个人预约" },
        res.data?.forEach(v => {
          v.value = v.id
          v.title = v.typeName
        })
        res.data.unshift({ value: "", title: '推荐' })
        setTabs(res.data)
      }
    })
  }

  const navigateToDetails = (item) => {
    navigateTo("/pages/zixun-detail/index", { item })
  };

  function changeIsPoster(item,index){
    let arr = JSON.stringify(listData)
    arr = JSON.parse(arr)
    arr.forEach(element => {
      if(element.id == item.id){
        element.isPoster = 2
      }else{
        element.isPoster = 1
      }
    });
    setListData(arr)
    contextVideo.playOnce(index)
  }

  return (
    <View className={"reservation-record-page"}>
      <View className="homebg"></View>

      <NavBar
        style={{ backgroundColor: "transparent", position: 'absolute', left: 0, top: statusBarHeight }}
        back={
          <>
            <ArrowLeft color="#fff" />
          </>
        }
        onBackClick={(e) => {
          Taro.navigateBack({
            delta: 1
          })
        }}
      >
        <span style={{ color: '#fff' }}>学习</span>
      </NavBar>
      <View className="vinpWrap" style={{marginTop: statusBarHeight+54+'px'}}>
        <Image className="iconSearchSty" src={iconSearch} />
        <Input className="inpSty"
          placeholder="关键字搜索"
          placeholderTextColor="#ffffff"
          value={params.videoName}
          onChange={(e) => {
            setParams({
              ...params,
              videoName: (e.detail.value).trim()
            })
          }}
        />
        {
          params.videoName.length > 0 &&
          <Image className="iconCloseSty" src={iconClose} onClick={() => {
            setParams({ ...params, videoName: "" })
          }} />
        }

      </View>
      {/* <Tabs
        tabs={tabs}
        value={params.videoTypeId}
        onClick={(tab) => setParams({ ...params,videoTypeId: tab.value })}
      /> */}

      <Tabs
        value={tabValue}
        onChange={(value) => {
          setTabValue(value)
          setParams({ ...params, videoTypeId: tabs[value].id })
        }}
      >
        {
          tabs.map((v, i) => {
            return <Tabs.TabPane key={i} title={v.title}></Tabs.TabPane>
          })
        }

      </Tabs>
      <View className={"list-wrapper"}>
        <InfiniteLoading
          empty={empty}
          onLoad={onLoad}
          onRefresh={onPull}
          refreshing={refreshing}
        >
          <VideoList videoList={listData} changeIsPoster={changeIsPoster}/>
          {listData?.length > 0 && <InfiniteLoadingFoot state={loadMore} />}
        </InfiniteLoading>
      </View>
    </View>
  );
}
